<template>
  <div>
    <head-top routerName="myMarket" title="我的集市"></head-top>
    <div class="content-wrap">
      <van-image :src="imgUrl" />
      <van-loading v-if="loading" />
      <ul v-else>
        <li v-for="(item, index) in nav" :key="index" @click="routerTo(item)">
          <svg-icon :icon-class="item.icon" class-name="icon" />
          <div class="name">{{ item.label }}</div>
        </li>
      </ul>
    </div>
    <password-input ref="password" @BuyData="submit"></password-input>
    <merchant-audit ref="merchant"></merchant-audit>
  </div>
</template>
<script>
import { Image as VanImage, Toast, Dialog, Loading } from "vant";
import HeadTop from "@/components/head";
import { completeAddGoods, userPayCoin } from "@/api/goodsRelease";
import "@/icons";
import md5 from "js-md5";
export default {
  components: {
    HeadTop,
    [VanImage.name]: VanImage,
    [Toast.name]: Toast,
    [Loading.name]: Loading,
    [Dialog.Component.name]: Dialog.Component,
    PasswordInput: (resolve) => require(["@/components/Password"], resolve),
    merchantAudit: (resolve) => require(["./merchantAudit"], resolve),
  },
  data() {
    return {
      imgUrl: require("./banner_market@2x.png"),
      nav: [],
      loading: true,
    };
  },
  created() {
    this.CompleteAddGoods();
  },
  methods: {
    CompleteAddGoods() {
      this.loading = true;
      completeAddGoods({}).then((res) => {
        this.loading = false;
        this.getNav(res.data);
      });
    },
    getNav({ resultStatus, errorMessage, errorCode }) {
      this.nav = [
        {
          label: "发布商品",
          icon: "icon_launch_product",
          name: "goodsRelease",
          resultStatus,
          errorMessage,
          errorCode,
        },
        {
          label: "商品管理",
          icon: "icon_commodity_management",
          name: "goodsManagement",
        },
        {
          label: "订单管理",
          icon: "icon_order_management",
          name: "orderManagement",
        },
        {
          label: "上架套餐",
          icon: "icon_order_management1",
          name: "shelvesSetMeal",
        },
        {
          label: "申请商家",
          icon: "icon_business_product",
          name: "isMerchant",
        },
      ];
    },
    routerTo({ name, resultStatus, errorMessage, errorCode }) {
      if (name === "goodsRelease" && !resultStatus) {
        if (errorCode === 99) {
          Dialog.confirm({
            message:
              "上传商品需支付100元宝    或者花费99个元宝，购买商品上架套餐",
            confirmButtonText: "继续支付",
            cancelButtonText: "去购买",
          })
            .then(() => {
              this.$refs.password.show();
            })
            .catch(() => {
              this.$router.push({ name: "shelvesSetMeal" });
            });
        }
        Toast.fail(errorMessage);
      } else if (name === "isMerchant") {
        this.$refs.merchant.show();
      } else {
        this.$router.push({ name: name });
      }
    },
    submit(Password) {
      userPayCoin({ payPassword: md5(Password) }).then((res) => {
        if (res.data.resultStatus) {
          this.$refs.password.hide();
          Toast.success(res.data.errorMessage);
          this.CompleteAddGoods();
        } else {
          this.$refs.password.fail(res.data.errorMessage);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.content-wrap {
  .van-image {
    display: block;
    height: 156px;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      margin-top: 23px;
      flex: 25% 0 0;
      width: 25%;
      text-align: center;
      .icon {
        display: block;
        margin: 0 auto;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06);
      }
      .name {
        margin-top: 8px;
        height: 12px;
        font-size: 12px;
        font-weight: 400;
        color: #000000;
        line-height: 12px;
      }
    }
  }
}
</style>